<template>
  <div class="index">
    <Row>
      <i-col span="4">
        <Menu theme="light" active-name="1" @on-select="changeMenu">
          <div class="ivu-menu-item-group-title bg-dark-success">全部产品</div>
          <template v-for="product in productList">
            <MenuGroup :title="product.title">
              <MenuItem :name="product.title+(index+1)" v-for="(item,index) in product.list" :key="item.name">
                <Icon type="document-text"></Icon>
                {{item.name}}
              </MenuItem>
            </MenuGroup>
          </template>
          <div class="ivu-menu-item-group-title bg-dark-success">最新新闻</div>
          <MenuItem :name="item.title+(index+1)" v-for="(item,index) in newsList" :key="item.name">
            <Icon type="document-text"></Icon>
            {{item.title}}
          </MenuItem>
        </Menu>
      </i-col>
      <i-col span="20">
        <Carousel autoplay :autoplay-speed='3000'>
          <CarouselItem>
            <div class="demo-carousel">
              <img src="../assets/slideShow/pic1.jpg" alt="">
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel">
              <img src="../assets/slideShow/pic1.jpg" alt="">
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel">
              <img src="../assets/slideShow/pic1.jpg" alt="">
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel">
              <img src="../assets/slideShow/pic1.jpg" alt="">
            </div>
          </CarouselItem>
        </Carousel>
        <Row>
          <template v-for="item in boardList">
            <i-col span="12" class="padding">
              <Card>
                <Row>
                  <i-col span="6" class="text-c">
                    <img :src="item.img">
                  </i-col>
                  <i-col span="18" class="index-card">
                    <h3 class="text-l">{{item.title}}</h3>
                    <p>{{item.description}}</p>
                    <p>
                      <router-link class="ivu-btn ivu-btn-success ivu-btn-large" :to="{path: 'detail/' + item.toKey}">
                        立即购买
                      </router-link>
                    </p>
                  </i-col>
                </Row>
              </Card>
            </i-col>
          </template>
        </Row>
      </i-col>
    </Row>

  </div>
</template>
<script>
  export default {
    name: 'index',
    mounted() {
      this.$nextTick(() => {
        this.util.ajax.post('/api/getProductList').then((res) => {
          this.productList = res.data;
        });
        this.util.ajax.post('/api/getNewsList').then((res) => {
          this.newsList = res.data;
        })
      })
    },
    data(){
      return {
        productList: {},
        newsList: {},
        boardList: [
          {
            title: '开放产品',
            description: '开放产品是一款开放产品',
            id: 'car',
            toKey: 'analysis',
            saleout: false,
            img: require('../assets/images/1.png')
          },
          {
            title: '品牌营销',
            description: '品牌营销帮助你的产品更好地找到定位',
            id: 'earth',
            toKey: 'count',
            saleout: false,
            img: require('../assets/images/2.png')
          },
          {
            title: '使命必达',
            description: '使命必达快速迭代永远保持最前端的速度',
            id: 'loud',
            toKey: 'forecast',
            saleout: true,
            img: require('../assets/images/3.png')
          },
          {
            title: '勇攀高峰',
            description: '帮你勇闯高峰，到达事业的顶峰',
            id: 'hill',
            toKey: 'publish',
            saleout: false,
            img: require('../assets/images/4.png')
          }
        ],

      }
    },
    methods: {
      changeMenu: function (index) {
        console.log(index)
      },
    }
  }
</script>
<style scoped="" lang="scss">
  $carouselWidth: 100%;
  $carouselHeight: 300px;
  .ivu-carousel {
    height: $carouselHeight;
    width: $carouselWidth;
    margin: 0 auto;
    img {
      height: $carouselHeight;
      width: $carouselWidth;
    }
  }

  .index-card {
    h3, p {
      padding: 4px;
    }
  }

  .ivu-menu-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
